{% extends "base.html" %}
{% block title %}添加用户{% endblock %}
{% block head %}
    {{ super() }}
    <style type="text/css">
        .tpl-form-file-img{
            width: 100px;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            添加用户
        </div>
        <ol class="am-breadcrumb">
            <li><a href="#" class="am-icon-home">首页</a></li>
            <li><a href="#">表单</a></li>
            <li class="am-active">Amaze UI 表单</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="tpl-block ">
                <div class="am-g tpl-amazeui-form">
                    <div class="am-u-sm-12 am-u-md-9">
                        <form class="am-form am-form-horizontal">
                            <div class="am-form-group">
                                <label for="user-name" class="am-u-sm-3 am-form-label">用户账号 / Name</label>
                                <div class="am-u-sm-9">
                                    <input value="" type="text" id="username" placeholder="用户账号 / Name">
                                    <small>登录账号</small>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label for="user-name" class="am-u-sm-3 am-form-label">工号 / Number</label>
                                <div class="am-u-sm-9">
                                    <input value="" type="text" id="number" placeholder="工号 / Number">
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label for="user-name" class="am-u-sm-3 am-form-label">用户密码 / Name</label>
                                <div class="am-u-sm-9">
                                    <input value="" type="text" id="password" placeholder="用户密码 / pwd">
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label for="user-name" class="am-u-sm-3 am-form-label">角色 / Role</label>
                                <div class="am-u-sm-9">
                                    <select id="role">
                                        {% for role in roles %}
                                            <option value="{{ role.id }}">{{ role.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label for="user-name" class="am-u-sm-3 am-form-label">状态 / Status</label>
                                <div class="am-u-sm-9">
                                    <select id="status">
                                        {% for sta in status %}
                                            <option value="{{ sta.value }}">{{ sta.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3">
                                    <button type="button" class="am-btn am-btn-primary" id="submit">保存修改</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block myscript %}
    <script type="text/javascript">
        $('#avatar_btn').click(function(){
            $('#doc-form-file').trigger('click')
        })
        $('#doc-form-file').on('change', function (event) {
            var formData=new FormData();
            formData.append('file', $("#doc-form-file")[0].files[0]);
            $.ajax({
                type:'POST',
                contentType: false,
                processData: false,
                url:'/upload/images',
                data:formData,
                success:function (res) {
                    if(res.state == 200){
                        $('#uploaded-image img').attr('src', res.url);
                    }else{
                        alert('上传失败')
                    }

                },
                error:function(err){
                    console.log(err);
                    alert('上传失败')
                }
            })
        })
        $('#submit').click(function(){
            var postData = {
                nickname:$('#user-name').val(),
                email:$('#user-email').val(),
                phone:$('#user-phone').val(),
                qq:$('#user-QQ').val(),
                intro:$('#user-intro').val(),
                avatar:$('#uploaded-image img').attr('src')
            }
            $.post('/user/update.do', postData, function(res){
                console.log(res)
                window.location.reload()
            })
        })
    </script>
{% endblock %}